<template>
  <div class="works-detail">
    <NavBar />
    <div class="work-info">
      <img :src="work.workPicture" alt="著作封面" class="w-full h-auto rounded-md shadow-sm">
      
      <div class="work-details">
        <h2 class="work-title">{{ work.name }}</h2>
        <p class="work-author">作者: {{ work.authorName }}</p>
        <!-- <p class="work-category">分类: {{ getCategoryName(work.categoryId) }}</p> -->
        <p class="work-summary">{{ work.synopsis }}</p>
        <el-button @click="startReading">开始阅读</el-button>
      </div>

    </div>

    <!-- 下方章节列表区域 -->
    <div class="chapter-list p-8">
      <h3 class="text-xl font-bold text-gray-800 mb-4">章节列表</h3>
      <ul class="space-y-2">
        <li v-for="(chapter,index) in work.chapters" :key="chapter.id"
          class="bg-white hover:bg-gray-100 p-4 rounded-md shadow-sm transition duration-300 ease-in-out">
          <span class="text-gray-800 font-medium" @click="goToChapterDetail(chapter.id)">第 {{ index+1}}章：</span>
          <span class="text-gray-700" @click="goToChapterDetail(chapter.id)">{{ chapter.title }}</span>
        </li>
      </ul>
    </div>

    <Footer />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import Footer from '@/components/Footer.vue'

export default {
  components: {
    NavBar,
    Footer
  },
  data() {
    return {
      work: {
      },
      /* categories: [
        { id: 1, name: '玄幻' },
        { id: 2, name: '都市' },
        { id: 3, name: '科幻' }
      ] */
    }
  },
  mounted() {
    const workId = this.$route.params.id;
    this.$http
       .get(`/work/${workId}`)
       .then((response) => {
            this.work = response.data;
          // console.log(this.work);
        })
       .catch((error) => {
            console.error("获取著作详情失败:", error);
        });
},
  methods: {
    getCategoryName(categoryId) {
      const category = this.categories.find(c => c.id === categoryId)
      return category ? category.name : '未知分类'
    },
    startReading() {
      // 这里可以添加开始阅读的逻辑，如跳转到阅读页面
      this.$router.push({ name: 'ChapterDetail', params: { chapterId: this.work.chapters[0].id } });
      // console.log('开始阅读')
    },

    goToChapterDetail(chapterId) {
      // console.log('点击了章节', chapterId);
      this.$router.push({ name: 'ChapterDetail', params: { chapterId } });
    }

  }
}
</script>

<style scoped>
.works-detail {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.work-info {
  padding: 30px; /* 恢复原来的内边距 */
  display: flex;
  gap: 20px;
  background: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex: 0 0 30%; // 修改: 调整为占据30%的高度
}

.work-cover {
  width: 200px;
  height: 300px; /* 恢复原来的高度 */
  object-fit: cover;
  border-radius: 8px;
}

.work-details {
  flex: 1;
}

.work-title {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.work-author,
.work-category {
  font-size: 16px;
  margin-bottom: 5px;
  color: #666;
}

.work-summary {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #333;
}

.chapter-list {
  background: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  flex: 0 0 50%; // 修改: 调整为占据50%的高度
}

.chapter-list h3 {
  font-size: 20px;
  margin-bottom: 16px;
  color: #333;
}

.chapter-list ul {
  list-style: none;
  padding: 0;
}

.chapter-list li {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 12px;
  margin-bottom: 8px;
  transition: background 0.3s ease;
}

.chapter-list li:hover {
  background: #f1f5f9;
}

.chapter-list span {
  cursor: pointer;
  color: #333;
}
</style>